<template>
<div class="supervision_pag">
    <!--面包屑-->
    <Breadcrumb :Breadcrumb="Breadcrumb"></Breadcrumb>
    <div class="contentBox">
        <div class='edit_box'>
            <div class="newbuild-container">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <!--人员id-->
                    <div class="build-ID-box">
                        <h1 class="Basics-title">
                            <h2>人员唯一标识</h2>
                        </h1>
                        <div class="input-box">
                            <div class="lable">身份证号：</div>
                            <el-form-item prop="idCard">
                                <el-input v-model="ruleForm.idCard" placeholder="请输入身份证号码" :disabled="idDisabled" type="text" maxlength="18" show-word-limit></el-input>
                            </el-form-item>
                        </div>
                    </div>
                    <!--简历信息-->
                    <div class="resume-box">
                        <h1 class="Basics-title">
                            <h2>简历信息</h2>
                        </h1>
                        <!--简历信息表单区域-->
                        <div class="resume-form">
                            <table border bordercolor="#E8E8E8">
                                <tr>
                                    <td class="table-lable">姓名</td>
                                    <td class="table-input">
                                        <el-form-item prop="name">
                                            <el-input v-model="ruleForm.name" placeholder="请输入姓名" :disabled="nameDisabled"></el-input>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">性别</td>
                                    <td class="table-input">
                                        <el-form-item prop="sex">
                                            <el-select v-model="ruleForm.sex" placeholder="请选择性别" :disabled="nameDisabled">
                                                <el-option v-for="item in Genderoptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">民族</td>
                                    <td class="table-input">
                                        <el-form-item prop="nation">
                                            <el-select v-model="ruleForm.nation" placeholder="请选择" :disabled="nameDisabled" @focus="DropDownAll('NATION')">
                                                <el-option v-for="item in dropDownListnation" :key="item.itemValue" :label="item.itemName" :value="item.itemValue"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </td>
                                    <!--头像上传区域-->
                                    <td rowspan="5" class="upload-td">
                                        <div class="upload-pic-box">
                                            <div class="upload-pic">
                                                <img src="@/assets/image/dog.png" alt />
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="table-lable">婚姻状况</td>
                                    <td class="table-input">
                                        <el-form-item prop="maritalStatus">
                                            <el-select v-model="ruleForm.maritalStatus" placeholder="请选择" :disabled="nameDisabled" @focus="DropDownAll('MARITAL_STATUS')">
                                                <el-option v-for="item in dropDownListmaritalStatus" :key="item.itemValue" :label="item.itemName" :value="item.itemValue"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">出生年月</td>
                                    <td class="table-input">
                                        <el-form-item prop="birthTime">
                                            <el-date-picker value-format="yyyy-MM-dd" v-model="ruleForm.birthTime" type="date" placeholder="年/月/日" :disabled="nameDisabled"></el-date-picker>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">年龄</td>
                                    <td class="table-input">
                                        <el-form-item prop="age">
                                            <el-input v-model="ruleForm.age" placeholder="请输入年龄" :disabled="nameDisabled"></el-input>
                                        </el-form-item>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="table-lable">学历</td>
                                    <td class="table-input">
                                        <el-form-item prop="education">
                                            <el-select v-model="ruleForm.education" placeholder="请选择" :disabled="nameDisabled" @focus="DropDownAll('EDUCATION')">
                                                <el-option v-for="item in dropDownListeducation" :key="item.itemValue" :label="item.itemName" :value="item.itemValue"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">职称</td>
                                    <td class="table-input">
                                        <el-form-item prop="technicalTitle">
                                            <el-select v-model="ruleForm.technicalTitle" placeholder="请选择" :disabled="nameDisabled" @focus="DropDownAll('TECHNICAL_TITLE')">
                                                <el-option v-for="item in dropDownListtechnicalTitle" :key="item.itemValue" :label="item.itemName" :value="item.itemValue"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">技术等级</td>
                                    <td class="table-input">
                                        <el-form-item prop="technicalLevel">
                                            <el-select v-model="ruleForm.technicalLevel" placeholder="请选择" :disabled="nameDisabled" @focus="DropDownAll('TECHNICAL_LEVEL')">
                                                <el-option v-for="item in dropDownListtechnicalLevel" :key="item.itemValue" :label="item.itemName" :value="item.itemValue"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="table-lable">政治面貌</td>
                                    <td class="table-input">
                                        <el-form-item prop="politicalOutlook">
                                            <el-select v-model="ruleForm.politicalOutlook" placeholder="请选择" :disabled="nameDisabled" @focus="DropDownAll('POLITICAL_OUTLOOK')">
                                                <el-option v-for="item in dropDownListpoliticalOutlook" :key="item.itemValue" :label="item.itemName" :value="item.itemValue"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">入党时间</td>
                                    <td class="table-input">
                                        <el-form-item prop="joinPartyTime">
                                            <el-date-picker value-format="yyyy-MM-dd" v-model="ruleForm.joinPartyTime" type="date" placeholder="年/月/日" :disabled="nameDisabled"></el-date-picker>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">入职人员类别</td>
                                    <td class="table-input">
                                        <el-form-item prop="entryType">
                                            <el-select v-model="ruleForm.entryType" placeholder="请选择" :disabled="nameDisabled" @focus="DropDownAll('ENTRY_TYPE')">
                                                <el-option v-for="item in dropDownListentryType" :key="item.itemValue" :label="item.itemName" :value="item.itemValue"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="table-lable">参加工作时间</td>
                                    <td class="table-input">
                                        <el-form-item prop="workTime">
                                            <el-date-picker value-format="yyyy-MM-dd" v-model="ruleForm.workTime" type="date" placeholder="年/月/日" :disabled="nameDisabled"></el-date-picker>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">入区时间</td>
                                    <td class="table-input">
                                        <el-form-item prop="entryTime">
                                            <el-date-picker value-format="yyyy-MM-dd" v-model="ruleForm.entryTime" type="date" placeholder="年/月/日" :disabled="nameDisabled"></el-date-picker>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">在职人员类型</td>
                                    <td class="table-input">
                                        <el-form-item prop="onDutyType">
                                            <el-select v-model="ruleForm.onDutyType" placeholder="请选择" :disabled="nameDisabled" @focus="DropDownAll('ON_DUTY_TYPE')">
                                                <el-option v-for="item in dropDownListonDutyType" :key="item.itemValue" :label="item.itemName" :value="item.itemValue"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="table-lable">外语种类</td>
                                    <td class="table-input">
                                        <el-form-item prop="foreignLanguageType">
                                            <el-select v-model="ruleForm.foreignLanguageType" placeholder="请选择" :disabled="nameDisabled" @focus="DropDownAll('FOREIGN_LANGUAGE_TYPE')">
                                                <el-option v-for="item in dropDownListforeignLanguageType" :key="item.itemValue" :label="item.itemName" :value="item.itemValue"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">外语水平</td>
                                    <td class="table-input">
                                        <el-form-item prop="foreignLanguageLevel">
                                            <el-select v-model="ruleForm.foreignLanguageLevel" placeholder="请选择" :disabled="nameDisabled" @focus="DropDownAll('FOREIGN_LANGUAGE_LEVEL')">
                                                <el-option v-for="item in dropDownListforeignLanguageLevel" :key="item.itemValue" :label="item.itemName" :value="item.itemValue"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">备注</td>
                                    <td colspan="2" class="table-input remarks-input">
                                        <el-input v-model="ruleForm.remark" placeholder="请输入备注" :disabled="nameDisabled" style></el-input>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="table-lable">现户口所在地</td>
                                    <td colspan="3" class="table-input now-load">
                                        <el-form-item prop="residenceProvince">
                                            <el-select v-model="ruleForm.residenceProvince" placeholder="选择省/直辖市" :disabled="nameDisabled" @focus="DropDownAll('PROVINCE')">
                                                <el-option v-for="item in dropDownListresidenceProvince" :key="item.itemValue" :label="item.itemName" :value="item.itemValue"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item prop="residenceDetail">
                                            <el-input v-model="ruleForm.residenceDetail" placeholder="请输入市/区/县/街道" :disabled="nameDisabled"></el-input>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">邮编</td>
                                    <td colspan="2" class="table-input">
                                        <el-form-item prop="residenceZipCode">
                                            <el-input v-model="ruleForm.residenceZipCode" placeholder="请输入邮编" :disabled="nameDisabled"></el-input>
                                        </el-form-item>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="table-lable">户口性质</td>
                                    <td class="table-input">
                                        <el-form-item prop="residenceType">
                                            <el-select v-model="ruleForm.residenceType" placeholder="请选择" :disabled="nameDisabled" @focus="DropDownAll('RESIDENCE_TYPE')">
                                                <el-option v-for="item in dropDownListresidenceType" :key="item.itemValue" :label="item.itemName" :value="item.itemValue"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">籍贯</td>
                                    <td colspan="4" class="table-input NativePlace">
                                        <el-form-item prop="nativeProvince">
                                            <el-select v-model="ruleForm.nativeProvince" placeholder="请选择" :disabled="nameDisabled" @focus="DropDownAll('PROVINCE')">
                                                <el-option v-for="item in dropDownListnativeProvince" :key="item.itemValue" :label="item.itemName" :value="item.itemValue"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item prop="nativeCity">
                                            <el-input v-model="ruleForm.nativeCity" placeholder="请输入市" :disabled="nameDisabled"></el-input>
                                        </el-form-item>
                                        <el-form-item prop="nativeRegion">
                                            <el-input v-model="ruleForm.nativeRegion" placeholder="请输入区/县" :disabled="nameDisabled"></el-input>
                                        </el-form-item>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="table-lable">毕业院校</td>
                                    <td class="table-input">
                                        <el-form-item prop="graduateSchool">
                                            <el-input v-model="ruleForm.graduateSchool" placeholder="请输入毕业院校" :disabled="nameDisabled"></el-input>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">专业</td>
                                    <td class="table-input">
                                        <el-form-item prop="major">
                                            <el-input v-model="ruleForm.major" placeholder="请输入专业" :disabled="nameDisabled"></el-input>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">学位</td>
                                    <td colspan="2" class="table-input">
                                        <el-form-item prop="degree">
                                            <el-select v-model="ruleForm.degree" placeholder="请选择" :disabled="nameDisabled" @focus="DropDownAll('CV_DEGREE')">
                                                <el-option v-for="item in dropDownListdegree" :key="item.itemValue" :label="item.itemName" :value="item.itemValue"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="table-lable">公司名称</td>
                                    <td class="table-input">
                                        <el-form-item prop="orgId">
                                            <el-select v-model="ruleForm.orgId" placeholder="请选择" :disabled="nameDisabled" @focus="DropDownGroup">
                                                <el-option v-for="item in getSuperviseCompanyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">公司备注</td>
                                    <td class="table-input">
                                        <el-form-item prop="orgRemark">
                                            <el-input v-model="ruleForm.orgRemark" placeholder="请输入公司备注" :disabled="nameDisabled"></el-input>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">入职时间</td>
                                    <td colspan="2" class="table-input">
                                        <el-form-item prop="inductionTime">
                                            <el-date-picker value-format="yyyy-MM-dd" v-model="ruleForm.inductionTime" type="date" placeholder="年/月/日" :disabled="nameDisabled"></el-date-picker>
                                        </el-form-item>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="table-lable">部门名称</td>
                                    <td class="table-input">
                                        <el-form-item prop="deptName">
                                            <el-input v-model="ruleForm.deptName" placeholder="请输入部门名称" :disabled="nameDisabled"></el-input>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">现任职务</td>
                                    <td class="table-input">
                                        <el-form-item prop="post">
                                            <el-input v-model="ruleForm.post" placeholder="请输入现任职务" :disabled="nameDisabled"></el-input>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">任职时间</td>
                                    <td colspan="2" class="table-input">
                                        <el-form-item prop="takeOfficeTime">
                                            <el-date-picker value-format="yyyy-MM-dd" v-model="ruleForm.takeOfficeTime" type="date" placeholder="年/月/日" :disabled="nameDisabled"></el-date-picker>
                                        </el-form-item>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <!--教育背景-->
                    <Table-list WatchOne="1" lable="教育背景" :everyList.sync="eduExpLst" ref="childForm" :detailBtIsLook="detailBtIsLook"></Table-list>
                    <!--留学经历-->
                    <Table-list WatchOne="2" lable="留学经历" :everyList.sync="abroadExpLst" ref="childForma" :detailBtIsLook="detailBtIsLook"></Table-list>
                    <!--工作经历-->
                    <Table-list WatchOne="3" lable="工作经历" :everyList.sync="workExpLst" ref="childFormb" :detailBtIsLook="detailBtIsLook"></Table-list>
                    <!--专业技能及特长-->
                    <Table-list WatchOne="4" lable="专业技能及特长" :everyList.sync="specialSkillLst" ref="childFormc" :detailBtIsLook="detailBtIsLook"></Table-list>
                    <!--个人详细信息-->
                    <div class="resume-box peopleDetail-box">
                        <h1 class="Basics-title">
                            <h2>个人详细信息</h2>
                        </h1>
                        <!--个人详细信息表格区域-->
                        <div class="resume-form">
                            <table border bordercolor="#E8E8E8">
                                <tr>
                                    <td class="table-lable">手机号码</td>
                                    <td class="table-input">
                                        <el-form-item prop="mobilePhone">
                                            <el-input v-model="ruleForm.mobilePhone" placeholder="请输入手机号码" :disabled="isPeopleDetail"></el-input>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">现居住地址</td>
                                    <td class="table-input">
                                        <el-form-item prop="resideAddress">
                                            <el-input v-model="ruleForm.resideAddress" placeholder="请输入现居住地址" :disabled="isPeopleDetail"></el-input>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">邮编</td>
                                    <td class="table-input">
                                        <el-form-item prop="resideZipCode">
                                            <el-input v-model="ruleForm.resideZipCode" placeholder="请输入邮编" :disabled="isPeopleDetail"></el-input>
                                        </el-form-item>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="table-lable">档案存档地</td>
                                    <td class="table-input" colspan="3">
                                        <el-form-item prop="archiveLocation">
                                            <el-input v-model="ruleForm.archiveLocation" placeholder="输入档案存档地" :disabled="isPeopleDetail"></el-input>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">特殊技术人才</td>
                                    <td class="table-input">
                                        <el-form-item prop="specialTalentsType">
                                            <el-select v-model="ruleForm.specialTalentsType" placeholder="请选择" :disabled="isPeopleDetail" @focus="DropDownAll('SPECIAL_TALENTS_TYPE')">
                                                <el-option v-for="item in dropDownListspecialTalentsType" :key="item.itemValue" :label="item.itemName" :value="item.itemValue"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="table-lable">有无北京市工作居住证</td>
                                    <td class="table-input">
                                        <el-form-item prop="havePekingWorkPermit">
                                            <el-select v-model="ruleForm.havePekingWorkPermit" placeholder="请选择" :disabled="isPeopleDetail" @focus="DropDownAll('HAVE_OR_NOT')">
                                                <el-option v-for="item in dropDownListhavePekingWorkPermit" :key="item.itemValue" :label="item.itemName" :value="item.itemValue"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">编号</td>
                                    <td class="table-input">
                                        <el-form-item prop="pekingWorkPermitNumber">
                                            <el-input v-model="ruleForm.pekingWorkPermitNumber" placeholder="输入档案存档地" :disabled="isPeopleDetail"></el-input>
                                        </el-form-item>
                                    </td>
                                    <td class="table-lable">有限期限</td>
                                    <td class="table-input">
                                        <el-form-item prop="pekingWorkPermitAll">
                                            <el-date-picker value-format="yyyy-MM-dd" v-model="ruleForm.pekingWorkPermitAll" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :disabled="isPeopleDetail"></el-date-picker>
                                        </el-form-item>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <!--家庭成员-->
                    <Table-list WatchOne="5" lable="家庭成员" :everyList.sync="familyRelationLst" ref="childFormd" :detailBtIsLook="detailBtIsLook"></Table-list>
                    <!--社会关系-->
                    <Table-list WatchOne="6" lable="社会关系" :everyList.sync="socialRelationLst" ref="childForme" :detailBtIsLook="detailBtIsLook"></Table-list>
                    <!--表彰及奖励-->
                    <Table-list WatchOne="7" lable="表彰及奖励" :everyList.sync="rewardLst" ref="childFormf" :detailBtIsLook="detailBtIsLook"></Table-list>
                    <!--备注-->
                    <div class="build-ID-box">
                        <h1 class="Basics-title">
                            <h2>备注</h2>
                        </h1>
                        <div class="input-box">
                            <el-input :disabled="personRemark" type="textarea" placeholder="请输入内容" v-model="ruleForm.personRemark" maxlength="200" show-word-limit></el-input>
                        </div>
                    </div>
                    <!--附件-->
                    <Attachment-upload :attachList.sync="attachList" :detailBtIsLook='detailBtIsLook'></Attachment-upload>
                </el-form>
                <!--底部的提交按钮=开始-->
                <!--底部的提交按钮=结束-->
                <el-dialog title="编辑头像" :visible.sync="dialogVisible" width="522px">
                    <el-upload class="upload-demo" action="#" :on-preview="handlePreview" :on-remove="handleRemove" multiple :limit="1" :file-list="fileList" :show-file-list="false" :http-request="httpRequest">
                        <el-button size="small" type="primary">请选择您要上传的头像</el-button>
                    </el-upload>
                    <div class="img-two-box">
                        <div class="img-box-1"></div>
                        <div class="img-box-2"></div>
                    </div>

                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import Breadcrumb from "@/components/IncorruptibleArchives/Breadcrumb.vue";
import TableList from "@/components/IncorruptibleArchives/TableList.vue";
import AttachmentUpload from "@/components/IncorruptibleArchives/AttachmentUpload.vue";
export default {
    components: {
        Breadcrumb,
        TableList,
        AttachmentUpload,
    },
    data() {
        //定义身份证的规则
        var validateNameID = (rule, value, callback) => {
            var uPattern = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/ || /^[1-9]\\d{5}\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}$/;
            let res = uPattern.test(value);
            if (value === "") {
                callback(new Error("身份证号不能为空"));
            } else if (!res) {
                callback(new Error("请输入正确的身份证号"));
            } else {
                callback();
            }
        };
        var validateage = (rule, value, callback) => {
            var uPattern = /^[1-9]\d{0,2}$/;
            let res = uPattern.test(value);
            if (value === "") {
                callback(new Error("年龄不能为空"));
            } else if (!res) {
                callback(new Error("请输入正确的格式"));
            } else {
                callback();
            }
        }
        var validateresidenceZipCode = (rule, value, callback) => {
            var uPattern = /^\d{6}$/;
            let res = uPattern.test(value);
            if (value === "") {
                callback(new Error("邮编不能为空"));
            } else if (!res) {
                callback(new Error("请输入正确的格式"));
            } else {
                callback();
            }
        }
        var validatePhone = (rule, value, callback) => {
            var uPattern = /^1\d{10}$/;
            let res = uPattern.test(value);
            if (value === "") {
                callback(new Error("手机号码不能为空"));
            } else if (!res) {
                callback(new Error("请输入正确的格式"));
            } else {
                callback();
            }
        }
        var validateResideZipCode = (rule, value, callback) => {
            var uPattern = /^\d{6}$/;
            let res = uPattern.test(value);
            if (value === "") {
                callback(new Error("邮编不能为空"));
            } else if (!res) {
                callback(new Error("请输入正确的格式"));
            } else {
                callback();
            }
        }
        return {
            detailBtIsLook: false,
            //面包靴跳转数据 
            Breadcrumb: [{
                    name: "廉政档案",
                    link: "IncorruptibleArchives",
                },
                {
                    name: "监督对象",
                    link: "supervise",
                },
                {
                    name: "新建监督对象",
                    link: "",
                },
            ],
            type: this.$route.query.type,
            //=================================
            //文件的上传
            attachList: [],
            //教育背景
            eduExpLst: [],
            // 留学经历
            abroadExpLst: [],
            // 工作经历
            workExpLst: [],
            // 专业技能及特长
            specialSkillLst: [],
            // 家庭成员
            familyRelationLst: [],
            // 社会关系
            socialRelationLst: [],
            // 表彰及奖励
            rewardLst: [],
            //备注的控制
            personRemark: true,
            dialogVisible: false,
            textarea: "",
            valueTimeFromTo: "",
            isPeopleDetail: true,
            fileList: [],
            value1: "",
            isTrue: true,
            isIDTrue: true,
            // 人员的唯一标识控制
            idDisabled: true,
            nameDisabled: true,
            userid: "",
            ruleForm: {
                //-------
                idCard: "",
                name: "",
                sex: "",
                nation: "",
                maritalStatus: "",
                birthTime: "",
                age: "",
                education: "",
                technicalTitle: "",
                technicalLevel: "",
                politicalOutlook: "",
                joinPartyTime: "",
                entryType: "",
                workTime: "",
                entryTime: "",
                foreignLanguageType: "",
                foreignLanguageLevel: "",
                remark: "",
                residenceProvince: "",
                residenceType: "",
                residenceZipCode: "",
                nativeProvince: "",
                graduateSchool: "",
                major: "",
                degree: "",
                orgId: "",
                orgRemark: "",
                deptName: "",
                post: "",
                onDutyType: "",
                residenceDetail: "",
                nativeCity: "",
                nativeRegion: "",
                inductionTime: "",
                takeOfficeTime: "",
                mobilePhone: "",
                resideAddress: "",
                resideZipCode: "",
                archiveLocation: "",
                specialTalentsType: "",
                havePekingWorkPermit: "",
                pekingWorkPermitNumber: "",
                avatar: "",
                pekingWorkPermitFromTime: "",
                pekingWorkPermitToTime: "",
                pekingWorkPermitAll: "",
            },

            rules: {
                idCard: [{
                    required: true,
                    validator: validateNameID,
                    trigger: "blur",
                }, ],
                name: [{
                    required: true,
                    trigger: "blur",
                }, ],
                pekingWorkPermitAll: [{
                    required: true,
                    trigger: "blur",
                }, ],
                pekingWorkPermitNumber: [{
                    required: true,
                    trigger: "blur",
                }, ],
                havePekingWorkPermit: [{
                    required: true,
                    trigger: "blur",
                }, ],
                specialTalentsType: [{
                    required: true,
                    trigger: "blur",
                }, ],
                archiveLocation: [{
                    required: true,
                    trigger: "blur",
                }, ],
                resideZipCode: [{
                    required: true,
                    trigger: "blur",
                    validator: validateResideZipCode,
                }, ],
                resideAddress: [{
                    required: true,
                    trigger: "blur",
                }, ],
                mobilePhone: [{
                    required: true,
                    trigger: "blur",
                    validator: validatePhone,
                }, ],
                takeOfficeTime: [{
                    required: true,
                    trigger: "blur",
                }, ],
                inductionTime: [{
                    required: true,
                    trigger: "blur",
                }, ],
                nativeRegion: [{
                    required: true,
                    trigger: "blur",
                }, ],
                nativeCity: [{
                    required: true,
                    trigger: "blur",
                }, ],
                residenceDetail: [{
                    required: true,
                    trigger: "blur",
                }, ],
                onDutyType: [{
                    required: true,
                    trigger: "blur",
                }, ],
                sex: [{
                    required: true,
                    trigger: "blur",
                }, ],
                nation: [{
                    required: true,
                    trigger: "blur",
                }, ],
                maritalStatus: [{
                    required: true,
                    trigger: "blur",
                }, ],
                birthTime: [{
                    required: true,
                    trigger: "blur",
                }, ],
                age: [{
                    required: true,
                    trigger: "blur",
                    validator: validateage,
                }, ],
                education: [{
                    required: true,
                    trigger: "blur",
                }, ],
                technicalTitle: [{
                    required: true,
                    trigger: "blur",
                }, ],
                technicalLevel: [{
                    required: true,
                    trigger: "blur",
                }, ],
                politicalOutlook: [{
                    required: true,
                    trigger: "blur",
                }, ],
                joinPartyTime: [{
                    required: true,
                    trigger: "blur",
                }, ],
                entryType: [{
                    required: true,
                    trigger: "blur",
                }, ],
                workTime: [{
                    required: true,
                    trigger: "blur",
                }, ],
                entryTime: [{
                    required: true,
                    trigger: "blur",
                }, ],
                foreignLanguageType: [{
                    required: true,
                    trigger: "blur",
                }, ],
                foreignLanguageLevel: [{
                    required: true,
                    trigger: "blur",
                }, ],
                remark: [{
                    required: true,
                    trigger: "blur",
                }, ],
                residenceProvince: [{
                    required: true,
                    trigger: "blur",
                }, ],
                residenceType: [{
                    required: true,
                    trigger: "blur",
                }, ],
                residenceZipCode: [{
                    required: true,
                    trigger: "blur",
                    validator: validateresidenceZipCode,
                }, ],
                nativeProvince: [{
                    required: true,
                    trigger: "blur",
                }, ],
                graduateSchool: [{
                    required: true,
                    trigger: "blur",
                }, ],
                major: [{
                    required: true,
                    trigger: "blur",
                }, ],
                degree: [{
                    required: true,
                    trigger: "blur",
                }, ],
                orgId: [{
                    required: true,
                    trigger: "blur",
                }, ],
                orgRemark: [{
                    required: true,
                    trigger: "blur",
                }, ],
                deptName: [{
                    required: true,
                    trigger: "blur",
                }, ],
                post: [{
                    required: true,
                    trigger: "blur",
                }, ],
            },
            //下拉数据的准备===开始
            Genderoptions: [{
                    value: "男",
                    label: "男",
                },
                {
                    value: "女",
                    label: "女",
                },
            ],
            dropDownListnation: [],
            dropDownListmaritalStatus: [],
            dropDownListeducation: [],
            dropDownListtechnicalTitle: [],
            dropDownListtechnicalLevel: [],
            dropDownListpoliticalOutlook: [],
            dropDownListentryType: [],
            dropDownListonDutyType: [],
            dropDownListforeignLanguageType: [],
            dropDownListforeignLanguageLevel: [],
            dropDownListresidenceProvince: [],
            dropDownListresidenceType: [],
            dropDownListnativeProvince: [],
            dropDownListdegree: [],
            dropDownListspecialTalentsType: [],
            dropDownListhavePekingWorkPermit: [],
            //公司下拉列表
            getSuperviseCompanyList: [],
            //下拉数据的准备====结束
        };
    },
    watch: {
        "ruleForm.pekingWorkPermitAll": function (newVal, oldVal) {
            console.log(newVal, oldVal, "1111111")
            if (newVal) {
                this.ruleForm.pekingWorkPermitFromTime = newVal[0]
                this.ruleForm.pekingWorkPermitToTime = newVal[1]
                // console.log(this.ruleForm.pekingWorkPermitFromTime, this.ruleForm.pekingWorkPermitToTime)
            }

        }
    },
    created() {
        this.getdetailAll()
        this.DropDownAll()
        this.DropDownGroup()
    },
    computed: {},
    methods: {
        //页面进来时获取个人信息详情进行展示
        getdetailAll() {
            this.Api.getSuperviseBaseDetailAll({
                id: this.$route.query.id
            }).then(res => {
                console.log(res, "获取全部信息成功")
                if (res && res.code === "0") {
                    this.ruleForm = res.data
                    this.attachList = res.data.attachList
                    this.eduExpLst = res.data.eduExpLst
                    this.abroadExpLst = res.data.abroadExpLst
                    this.workExpLst = res.data.workExpLst
                    this.specialSkillLst = res.data.specialSkillLst
                    this.familyRelationLst = res.data.familyRelationLst
                    this.socialRelationLst = res.data.socialRelationLst
                    this.rewardLst = res.data.rewardLst
                    this.ruleForm.pekingWorkPermitAll = [this.ruleForm.pekingWorkPermitFromTime, this.ruleForm.pekingWorkPermitToTime]
                    // console.log(typeof (this.ruleForm.orgId), "leixing")
                } else {
                    this.$message.warning("获取个人信息失败")
                }

            })
        },
        //提交按钮触发的事件
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //准备要传的数据
                    let jsonStr = JSON.stringify(this.ruleForm)
                    let paramsList = JSON.parse(jsonStr);
                    paramsList.attachList = this.attachList
                    paramsList.eduExpLst = this.eduExpLst
                    paramsList.familyRelationLst = this.familyRelationLst
                    paramsList.rewardLst = this.rewardLst
                    paramsList.specialSkillLst = this.specialSkillLst
                    paramsList.workExpLst = this.workExpLst
                    paramsList.abroadExpLst = this.abroadExpLst
                    paramsList.socialRelationLst = this.socialRelationLst
                    this.$delete(paramsList, 'pekingWorkPermitAll')
                    // console.log(paramsList, "paramsList")
                    // 请求新建的接口
                    // type是1说明是监督对象的新建2就是检查对象的新建
                    this.Api.getSuperviseEditList(paramsList).then(res => {
                        console.log(res, "修改提交")
                        if (res.code === "0") {
                            this.$router.push({
                                name: 'supervisedetail',
                                query: {
                                    type: 1,
                                    id: "16"
                                }
                            })
                        } else {
                            this.$message.warning(res.message);
                        }
                    })

                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        //重置表单验证---并清空数据
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.$refs.childForm.$refs.tableRuleForm.resetFields();
            this.$refs.childForma.$refs.tableRuleForm.resetFields();
            this.$refs.childFormb.$refs.tableRuleForm.resetFields();
            this.$refs.childFormc.$refs.tableRuleForm.resetFields();
            this.$refs.childFormd.$refs.tableRuleForm.resetFields();
            this.$refs.childForme.$refs.tableRuleForm.resetFields();
            this.$refs.childFormf.$refs.tableRuleForm.resetFields();
        },

        //下拉框的接口请求
        DropDownAll() {
            let strjsonlist = localStorage.getItem("SET_DICTIONARIES");
            let jsonList = JSON.parse(strjsonlist);
            // console.log(jsonList, "jsonList")
            let downlist = jsonList.filter((item, index) => {
                return item.typeCode === 'NATION';
            });
            this.dropDownListnation = downlist[0].itemList;
            let downlist2 = jsonList.filter((item, index) => {
                return item.typeCode === 'MARITAL_STATUS';
            });
            this.dropDownListmaritalStatus = downlist2[0].itemList;
            let downlist3 = jsonList.filter((item, index) => {
                return item.typeCode === 'EDUCATION';
            });
            this.dropDownListeducation = downlist3[0].itemList;
            let downlist4 = jsonList.filter((item, index) => {
                return item.typeCode === 'TECHNICAL_TITLE';
            });
            this.dropDownListtechnicalTitle = downlist4[0].itemList;
            let downlist5 = jsonList.filter((item, index) => {
                return item.typeCode === 'TECHNICAL_LEVEL';
            });
            this.dropDownListtechnicalLevel = downlist5[0].itemList;
            let downlist6 = jsonList.filter((item, index) => {
                return item.typeCode === 'POLITICAL_OUTLOOK';
            });
            this.dropDownListpoliticalOutlook = downlist6[0].itemList;
            let downlist7 = jsonList.filter((item, index) => {
                return item.typeCode === 'ENTRY_TYPE';
            });
            this.dropDownListentryType = downlist7[0].itemList;
            let downlist8 = jsonList.filter((item, index) => {
                return item.typeCode === 'ON_DUTY_TYPE';
            });
            this.dropDownListonDutyType = downlist8[0].itemList;
            let downlist9 = jsonList.filter((item, index) => {
                return item.typeCode === 'FOREIGN_LANGUAGE_TYPE';
            });
            this.dropDownListforeignLanguageType = downlist9[0].itemList;
            let downlist10 = jsonList.filter((item, index) => {
                return item.typeCode === 'FOREIGN_LANGUAGE_LEVEL';
            });
            this.dropDownListforeignLanguageLevel = downlist10[0].itemList;
            let downlist11 = jsonList.filter((item, index) => {
                return item.typeCode === 'PROVINCE';
            });
            this.dropDownListresidenceProvince = downlist11[0].itemList;
            this.dropDownListnativeProvince = downlist11[0].itemList;
            let downlist12 = jsonList.filter((item, index) => {
                return item.typeCode === 'RESIDENCE_TYPE';
            });
            this.dropDownListresidenceType = downlist12[0].itemList;
            let downlist13 = jsonList.filter((item, index) => {
                return item.typeCode === 'CV_DEGREE';
            });
            this.dropDownListdegree = downlist13[0].itemList;
            let downlist14 = jsonList.filter((item, index) => {
                return item.typeCode === 'SPECIAL_TALENTS_TYPE';
            });
            this.dropDownListspecialTalentsType = downlist14[0].itemList;
            let downlist15 = jsonList.filter((item, index) => {
                return item.typeCode === 'HAVE_OR_NOT';
            });
            this.dropDownListhavePekingWorkPermit = downlist15[0].itemList;
        },
        //公司的下拉列表
        DropDownGroup() {
            this.Api.getSuperviseCompanyList().then((res) => {
                if (res.code === "0") {
                    this.getSuperviseCompanyList = res.data;
                    this.getSuperviseCompanyList.forEach((item) => {
                        item.id = item.id.toString()
                    })
                } else {
                    this.$message.error("获取公司的下拉列表失败");
                }
            });
        },
        //取消按钮id
        cancel() {
            this.$refs["ruleForm"].clearValidate("idCard");
            this.idDisabled = true;
            this.userid = "";
        },
        //简历的验证结果取消-多个
        cancelBasics() {
            this.$refs["ruleForm"].clearValidate([
                "name",
                "sex",
                "nation",
                "maritalStatus",
                "birthTime",
                "age",
                "education",
                "technicalTitle",
                "technicalLevel",
                "politicalOutlook",
                "joinPartyTime",
                "entryType",
                "workTime",
                "entryTime",
                "onDutyType",
                "foreignLanguageType",
                "foreignLanguageLevel",
                "residenceProvince",
                "residenceDetail",
                "residenceZipCode",
                "residenceType",
                "nativeProvince",
                "nativeCity",
                "nativeRegion",
                "graduateSchool",
                "major",
                "degree",
                "orgId",
                "orgRemark",
                "inductionTime",
                "deptName",
                "post",
                "takeOfficeTime",
                "mobilePhone",
                "resideAddress",
                "resideZipCode",
                "archiveLocation",
                "specialTalentsType",
                "havePekingWorkPermit",
                "pekingWorkPermitNumber",
                "pekingWorkPermitFromTime",
            ]);
            this.nameDisabled = true;
        },
        //备注的取消
        cancelPersonRemark() {
            this.personRemark = true;
        },
        //个人详细信息详情验证结果取消-多个
        PeopleDetail() {
            this.$refs["ruleForm"].clearValidate([
                "mobilePhone",
                "resideAddress",
                "resideZipCode",
                "archiveLocation",
                "specialTalentsType",
                "havePekingWorkPermit",
                "pekingWorkPermitNumber",
                "pekingWorkPermitFromTime",
            ]);
            this.isPeopleDetail = true;
        },
        //图片上传的方法
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        httpRequest() {
            console.log("httpRequest");
            return;
        },
    },
};
</script>

<style lang="less" scoped>
.edit_box {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.newbuild-container {
    width: 100%;
    height: calc(100%);
    overflow: auto;
    position: relative;

    /deep/.build-ID-box {
        padding: 20px 20px 20px 20px;
        background-color: white;
        margin-bottom: 10px;

        .input-box {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .lable {
                font-size: 14px;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                line-height: 32px;
            }

            .el-form-item {
                margin-bottom: 0;

                .el-form-item__content {
                    margin-left: 0 !important;
                }
            }

            .el-input {
                width: 320px;
                border-radius: 2px;

                .el-input__inner {
                    height: 36px;
                }
            }
        }
    }

    /deep/.resume-box {
        padding: 20px 20px 20px 20px;
        background-color: white;
        margin-bottom: 10px;

        //加入表单验证后的样式调整--开始
        .el-form-item__error {
            display: none;
        }

        .el-form-item {
            margin-bottom: 0;
            height: 44px;
            display: flex;
            align-items: center;

            .el-form-item__content {
                margin-left: 0 !important;
                width: 100%;

                .el-input {
                    line-height: 36px;
                    height: 36px;
                }
            }

            .el-form-item__content::after,
            .el-form-item__content::before {
                content: none;
            }
        }

        .el-form-item::after,
        .el-form-item::before {
            display: inline;
        }

        //加入表单验证后的样式调整--结束
        .resume-form {
            table {
                width: 100%;

                .table-lable {
                    width: 8%;
                    height: 46px;
                    background: rgba(250, 250, 250, 1);
                    font-size: 14px;
                    font-weight: 600;
                    color: rgba(51, 51, 51, 1);
                    line-height: 21px;
                    padding: 0 0 0 10px;
                }

                .table-input {
                    padding: 0 10px;
                }

                .el-input {
                    border-radius: 2px;

                    .el-input__inner {
                        height: 36px;
                    }
                }

                .el-select {
                    width: 100%;
                }

                .NativePlace {
                    // width: 100%;

                    .el-select {
                        width: 100%;
                        float: left;
                        margin-right: 10px;
                    }

                    >.el-input {
                        width: 32.5%;
                        float: left;
                        margin-right: 10px;
                    }

                    .el-form-item {
                        width: 32.8%;
                        margin-right: 10px;
                        float: left;
                    }
                }

                .NativePlace .el-form-item:last-child {
                    width: 32.2%;
                    margin-right: 0px;
                }

                .NativePlace .el-input:last-child {
                    margin-right: 0px;
                }

                .el-date-editor {
                    width: 100%;

                    .el-input__inner {
                        padding-left: 18px;
                    }

                    .el-input__prefix {
                        left: 91%;
                        top: -5%;
                    }
                }

                /deep/.now-load {
                    // width: 100%;
                    // display: flex;
                    .el-select {
                        width: 100%;
                        float: left;
                        margin-right: 9px;
                    }

                    >.el-input {
                        float: left;
                        width: 57%;
                    }
                }

                .now-load .el-form-item:first-child {
                    width: 40.5%;
                    margin-right: 10px;
                    float: left;
                }

                .now-load .el-form-item:last-child {
                    width: 58%;
                    float: left;
                }
            }
        }
    }
}

//表头标签
.Basics-title {
    padding: 0 0 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    background-color: white;

    >h2 {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 16px;
        border-left: 4px solid #3d7fff;
        padding: 0 0 0 10px;
    }

    //编辑按钮的样式
    .el-button--edit {
        width: 70px;
        height: 30px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(61, 127, 255, 1);
        padding: 0;
        color: #3d7fff;
    }
}

//取消和保存按钮的样式
.buttom-group {
    .el-button--cancel {
        width: 70px;
        height: 30px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(61, 127, 255, 1);
        padding: 0;
        font-size: 14px;
        font-weight: 500;
        color: rgba(61, 127, 255, 1);
        line-height: 22px;
    }

    .el-button--save {
        width: 90px;
        height: 30px;
        background: rgba(61, 127, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(61, 127, 255, 1);
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 22px;
        padding: 0;
    }
}

//备注输入框的样式长度问题
.remarks-input {
    .el-input {
        width: 64.5%;
    }
}

//图片上传的
/deep/.upload-pic-box {
    width: 100%;
    height: 100%;
    background: rgba(250, 250, 250, 1);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: absolute;
    top: 0;
    right: 0;

    .upload-pic {
        background: rgba(250, 250, 250, 1);
        overflow: hidden;

        img {
            width: 160px;
            height: 159px;
        }
    }

    /deep/.but-group {
        display: flex;
        justify-content: center;
        background: #afafaf;
        width: 161px;
        height: 26px;

        .el-button {
            padding: 0 0 0 0;
            border: 0;
            background-color: #afafaf;
            color: rgba(255, 255, 255, 1);
        }

        .el-button--change {
            span {
                padding-right: 7px;
                border-right: 1px solid white;
            }
        }
    }
}

.upload-td {
    position: relative;
    width: 170px;
}

//tupian上传
/deep/.el-dialog__wrapper {
    .el-dialog {
        min-height: 498px;

        .el-dialog__header {
            padding: 10px 20px 10px;

            .el-dialog__title {
                font-size: 18px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 600;
                color: rgba(51, 51, 51, 1);
                line-height: 25px;
            }

            .el-dialog__headerbtn {
                top: 10px;
                right: 10px;
            }
        }

        .el-dialog__body {
            .upload-demo {
                .el-upload--text {
                    .el-button--primary {
                        width: 160px;
                        height: 36px;
                        background: rgba(255, 255, 255, 1);
                        border-radius: 2px;
                        border: 1px solid rgba(61, 127, 255, 1);
                        padding: 0;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: rgba(61, 127, 255, 1);
                        line-height: 20px;
                    }
                }
            }

            .img-two-box {
                display: flex;
                justify-content: space-between;

                .img-box-1 {
                    width: 300px;
                    height: 300px;
                    background: rgba(248, 248, 248, 1);
                    border: 1px solid rgba(221, 221, 221, 1);
                    margin-top: 20px;
                }

                .img-box-2 {
                    width: 160px;
                    height: 181px;
                    background: rgba(248, 248, 248, 1);
                    border: 1px solid rgba(221, 221, 221, 1);
                    margin-top: 20px;
                }
            }
        }

        .el-dialog__footer {
            padding-top: 0;
        }
    }
}

//个人详细资料信息
/deep/.peopleDetail-box {
    .table-input {
        .el-select {
            .el-input {
                .el-input__inner {
                    height: 36px;
                }
            }
        }
    }
}

//底部确认按钮的样式
.bu-bottom {
    margin-top: 20px;
    width: calc(100% - 215px);
    height: 56px;
    background-color: #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 200px;
    padding-right: 20px;

    .el-button--cancel {
        width: 70px;
        height: 36px;
        background: rgba(255, 255, 255, 1);
        border-radius: 3px;
        border: 1px solid rgba(215, 219, 224, 1);
        padding: 0;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
        margin-right: 10px;
    }

    .el-button--confirm {
        width: 70px;
        height: 36px;
        background: rgba(61, 127, 255, 1);
        border-radius: 3px;
        border: 1px solid rgba(215, 219, 224, 1);
        padding: 0;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 22px;
        margin-right: 10px;
    }
}

.height-50 {
    height: 60px;
}

/deep/.el-form-item.is-error .el-input__inner,
.el-form-item.is-error .el-input__inner:focus,
.el-form-item.is-error .el-textarea__inner,
.el-form-item.is-error .el-textarea__inner:focus,
.el-message-box__input input.invalid,
.el-message-box__input input.invalid:focus {
    border-color: #f56c6c !important;
}

/deep/.el-input__inner {
    border: 0 !important;
    color: #333 !important;
    background-color: white !important;
}

/deep/i {
    display: none !important;
}

/deep/.el-range-input {
    background-color: white !important;
}

/deep/.el-range-separator {
    color: #333 !important;
}

.supervision_pag {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .contentBox {
        width: 100%;
        height: calc(100% - 56px);
        overflow: auto;
    }
}
</style>
